<template>
  <div>
    <el-upload class="upload-file"
               drag
               :action="`http://localhost:81/dev-api/common/upload`"
               multiple
               :before-upload="handleBeforeAvatarUpload"
               :on-success="handleSuccess"
               :headers="bindUploadAccessToken"
               :on-remove="handleRemove">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div class="attach-show-con"
         id="caseRegisterImg2" v-viewer>
      <div class="avatarimg" v-for="(item, index) in showUmEvtAttchList" :key="index">
        <img style="cursor: pointer;"
             :src="`${item.path}`"
        >
        <span>{{item.attachFileName}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import imageUpload from "@/components/ImageUpload/index"
  import {getToken} from "@/utils/auth";
  // import Viewer from 'viewerjs'
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'

  Vue.use(Viewer)

  export default {
    name: 'Tailoring',
    components:{
      imageUpload
    },
    computed: {
      bindUploadAccessToken() {
        return {'Authorization': `Bearer ` + getToken()}
      }
    },
    data() {
      return {
        isLt50M: '',
        showUmEvtAttchList: [],
        removeUmEvtAttachList: [],
        newUmEvtAttachList: [],
        // 表单参数
        form: {},
      }
    },
    methods: {
      /**
       * @author: mi.liu@topevery.club
       * @Date: 2019/7/8 15:44
       * @description: 图片上传前，做限制
       */
      handleBeforeAvatarUpload(file) {
        const index = file.name.lastIndexOf('.')
        const suffix = file.name.substr(index + 1) // map3

        const isJPEG = (suffix === 'jpeg' || suffix === 'JPEG')
        const isPNG = (suffix === 'png' || suffix === 'PNG')
        const isJPG = (suffix === 'jpg' || suffix === 'JPG')

        if (!(isJPG || isJPEG || isPNG)) {
          this.$message.error("上传的文件格式只能是PNG、JPG、JPEG!")
          return false
        }


        if (isJPG || isPNG || isJPEG) {
          this.isLt50M = file.size / 1024 / 1024 < 50
          if (!this.isLt50M) {
            this.$message.error("上传图片大小不能超过 20MB！")
            return false
          }
        }

      },
      /**
       * @author: mi.liu@topevery.club
       * @Date: 2019/7/8 15:51
       * @description: 图片上传成功
       */
      handleSuccess(res, file) {
        const attach = {}
        attach.attachFileName = file.name
        attach.path = process.env.VUE_APP_BASE_API + "/files/view?id=" + res.id

        // 修改的时候 删除的附件添加到 removeUmEvtAttachList
        if (this.form.id !== undefined) {
          this.newUmEvtAttachList.push(attach)
        }
        this.showUmEvtAttchList.push(attach)

      },
      /**
       * @author: mi.liu@topevery.club
       * @Date: 2019/7/8 15:50
       * @description: 删除附件
       */
      handleRemove(file, fileList) {
        console.log('attachFilePath:', file, fileList)
        const response = file.response === undefined ? file.url : file.response.url
        // 修改的时候 删除的附件添加到 removeUmEvtAttachList
        if (this.form.id !== undefined) {
          // this.ruleForm.removeUmEvtAttachList = []
          console.log('file', file)
          this.removeUmEvtAttachList.push({
            id: file.id,
            attachFileName: file.name,
            attachFilePath: response
          })
        }
        // 删除上传后的附件 展示情况
        this.showUmEvtAttchList = this.showUmEvtAttchList.filter((item) => {
          return item.attachFilePath !== response
        })
      },
      /**
       * @author: mi.liu@topevery.club
       * @Date: 2019/7/8 15:51
       * @description: 图片放大器
       */
      handleMagnify() {
        // Viewer.noConflict()
        this.$nextTick(() => {
          const ViewerDom = document.getElementById('caseRegisterImg')

          if (this.flag) {
            this.viewer.destroy()
          }
          this.viewer = new Viewer(ViewerDom, {
            viewed() {
              this.viewer.update()
            },
            // 相关配置项
            zIndex: 99999999999
          })
          this.flag = true
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .attach-show-con {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    .avatarimg {
      width: 100px;
      height: 90px;
      padding-bottom: 5px;
      margin: 0 6px 6px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      line-height: 30px;
      border: 1px solid #eee;
      font-size: 12px;
      text-align: center;

      span {
        display: block;
        line-height: 14px;
        margin-top: 5px;
        width: 100%;
      }

      img {
        width: 100%;
        height: 60px;
        display: block;
      }

      video {
        width: 100px;
        height: 60px;
        display: block;
      }

      audio {
        width: 100px;
        display: block;
        height: 40px;
        margin: 10px 0;

        &:focus {
          outline: none;
        }
      }
    }
  }
</style>

<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash; directive &ndash;&gt;-->
<!--    <div class="images" v-viewer>-->
<!--      <img v-for="src in images" :key="src" :src="src">-->
<!--    </div>-->
<!--    &lt;!&ndash; component &ndash;&gt;-->
<!--&lt;!&ndash;    <viewer :images="images">&ndash;&gt;-->
<!--&lt;!&ndash;      <img v-for="src in images" :key="src" :src="src">&ndash;&gt;-->
<!--&lt;!&ndash;    </viewer>&ndash;&gt;-->
<!--    &lt;!&ndash; api &ndash;&gt;-->
<!--&lt;!&ndash;    <button type="button" @click="show">Click to show</button>&ndash;&gt;-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--  import 'viewerjs/dist/viewer.css'-->
<!--  import VueViewer from 'v-viewer'-->
<!--  import Vue from 'vue'-->
<!--  Vue.use(VueViewer)-->
<!--  export default {-->
<!--    data() {-->
<!--      return {-->
<!--        images: [-->
<!--          "https://picsum.photos/200/200",-->
<!--          "https://picsum.photos/300/200",-->
<!--          "https://picsum.photos/250/200"-->
<!--        ]-->
<!--      };-->
<!--    },-->
<!--    methods: {-->
<!--      // show() {-->
<!--      //   this.$viewerApi({-->
<!--      //     images: this.images,-->
<!--      //   })-->
<!--      // },-->
<!--    },-->
<!--  }-->
<!--</script>-->

<!--<template>-->
<!--  <div class="cropper-app">-->
<!--    <el-form :model="formValidate" :rules="ruleValidate" ref="formValidate" label-width="100px" class="demo-ruleForm">-->
<!--      <el-form-item label="封面上传" prop="mainImage">-->
<!--        <div class="list-img-box">-->
<!--          <div v-if="formValidate.mainImage !== ''">-->
<!--            <img :src="formValidate.mainImage" style='width:300px;height:150px' alt="自定义封面">-->
<!--          </div>-->
<!--          <div v-else class="upload-btn" style="height: 120px;" @click="uploadPicture('flagImg')">-->
<!--            <i class="el-icon-plus" style="font-size: 30px;"></i>-->
<!--            <span>封面设置</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <input type="hidden" v-model="formValidate.mainImage" placeholder="请添加封面">-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    &lt;!&ndash; 剪裁组件弹窗 &ndash;&gt;-->
<!--    <el-dialog-->
<!--      title="裁切照片"-->
<!--      :visible.sync="cropperModel"-->
<!--      width="950px"-->
<!--      center-->
<!--    >-->
<!--      <cropper-image-->
<!--        :Name="cropperName"-->
<!--        @uploadImgSuccess = "handleUploadSuccess"-->
<!--        ref="child">-->
<!--      </cropper-image>-->
<!--    </el-dialog>-->
<!--    &lt;!&ndash;查看大封面&ndash;&gt;-->
<!--    <el-dialog-->
<!--      title="查看大封面"-->
<!--      :visible.sync="imgVisible"-->
<!--      center>-->
<!--      <img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看">-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import CropperImage from "./CropperImage";-->
<!--  export default {-->
<!--    name: "Tailoring",-->
<!--    components: {CropperImage},-->
<!--    data () {-->
<!--      return {-->
<!--        formValidate: {-->
<!--          mainImage: '',-->
<!--        },-->
<!--        ruleValidate: {-->
<!--          mainImage: [-->
<!--            {required: true, message: '请上传封面', trigger: 'blur'}-->
<!--          ],-->
<!--        },-->
<!--        //裁切图片参数-->
<!--        cropperModel:false,-->
<!--        cropperName:'',-->
<!--        imgName: '',-->
<!--        imgVisible: false-->
<!--      }-->
<!--    },-->
<!--    methods: {-->
<!--      //封面设置-->
<!--      uploadPicture(name){-->
<!--        this.cropperName = name;-->
<!--        this.cropperModel = true;-->
<!--      },-->
<!--      //图片上传成功后-->
<!--      handleUploadSuccess (data){-->
<!--        console.log(data)-->
<!--        switch(data.name){-->
<!--          case 'flagImg':-->
<!--            this.formValidate.mainImage = 'http://ydfblog.cn/dfs/'+data.url;-->
<!--            console.log('最终输出'+data.name)-->
<!--            break;-->
<!--        }-->
<!--        this.cropperModel = false;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->
<!--<style scoped>-->
<!--  .upload-list-cover{-->
<!--    position: absolute;-->
<!--    top: 0;-->
<!--    bottom: 0;-->
<!--    left: 0;-->
<!--    right: 0;-->
<!--    display: flex;-->
<!--    flex-wrap: wrap;-->
<!--    justify-content: space-between;-->
<!--    padding: 0 40px;-->
<!--    align-items: center;-->
<!--    background: rgba(0,0,0,.6);-->
<!--    opacity: 0;-->
<!--    transition: opacity 1s;-->
<!--  }-->
<!--  .cover_icon {-->
<!--    font-size: 30px;-->
<!--  }-->
<!--  .upload-btn{-->
<!--    display: -webkit-box;-->
<!--    display: -ms-flexbox;-->
<!--    display: flex;-->
<!--    -ms-flex-wrap: wrap;-->
<!--    flex-wrap: wrap;-->
<!--    -webkit-box-pack: center;-->
<!--    -ms-flex-pack: center;-->
<!--    justify-content: center;-->
<!--    -webkit-box-align: center;-->
<!--    -ms-flex-align: center;-->
<!--    align-items: center;-->
<!--    border: 1px solid #cccccc;-->
<!--    border-radius: 5px;-->
<!--    overflow: hidden;-->
<!--    box-shadow: 0 0 1px #cccccc;-->
<!--  }-->
<!--  .upload-btn:hover {-->
<!--    border: 1px solid #69b7ed;-->
<!--  }-->
<!--  .upload-btn i{-->
<!--    margin: 5px;-->
<!--  }-->
<!--</style>-->
